<template>
  <div class="category-list-page">
    <HeaderNav />
    
    <div class="main-container">
      <!-- 面包屑导航 -->
      <div class="breadcrumb">
        <span class="breadcrumb-item" @click="$router.push('/home')">首页</span>
        <span class="breadcrumb-separator">/</span>
        <span class="breadcrumb-item active">商品分类</span>
      </div>

      <!-- 分类列表 -->
      <div class="category-grid" v-loading="loading">
        <div
          v-for="category in categoryList"
          :key="category.id"
          class="category-card"
          @click="goToCategory(category.id)"
        >
          <div class="category-icon-large">
            {{ getCategoryIcon(category.categoryName) }}
          </div>
          <div class="category-name">{{ category.categoryName }}</div>
          <div class="category-desc" v-if="category.description">
            {{ category.description }}
          </div>
          <div class="category-count" v-if="category.productCount !== undefined">
            共 {{ category.productCount }} 件商品
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <el-empty
        v-if="!loading && categoryList.length === 0"
        description="暂无分类"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import HeaderNav from '@/components/HeaderNav.vue'
import { getCategoryList } from '@/api/category'

const router = useRouter()

const loading = ref(false)
const categoryList = ref([])

// 获取分类图标
const getCategoryIcon = (categoryName) => {
  const iconMap = {
    '食品生鲜': '🍎',
    '家居日用': '🏠',
    '粮油调味': '🛒',
    '休闲零食': '🍵',
    '节日礼品': '🎁',
    '个人护理': '🧴',
    '服装鞋帽': '👕',
    '数码家电': '📱'
  }
  return iconMap[categoryName] || '📦'
}

// 加载分类列表
const loadCategories = async () => {
  loading.value = true
  try {
    const res = await getCategoryList()
    if (res.code === 200 && res.data) {
      categoryList.value = res.data
      // 如果有分类，默认跳转到第一个分类
      if (categoryList.value.length > 0 && !router.currentRoute.value.params.id) {
        // 这里不自动跳转，让用户选择
      }
    }
  } catch (error) {
    console.error('加载分类列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 跳转到分类详情
const goToCategory = (categoryId) => {
  router.push(`/category/${categoryId}`)
}

onMounted(() => {
  loadCategories()
})
</script>

<style lang="scss" scoped>
.category-list-page {
  min-height: 100vh;
  background-color: #f5f7fa;

  .main-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
  }

  /* 面包屑导航 */
  .breadcrumb {
    background-color: white;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    font-size: 14px;

    .breadcrumb-item {
      color: #606266;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: #409EFF;
      }

      &.active {
        color: #409EFF;
        cursor: default;
      }
    }

    .breadcrumb-separator {
      margin: 0 8px;
      color: #c0c4cc;
    }
  }

  /* 分类网格 */
  .category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;

    @media (max-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
    }

    @media (max-width: 480px) {
      grid-template-columns: 1fr;
    }
  }

  /* 分类卡片 */
  .category-card {
    background: white;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 2px solid transparent;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(64, 158, 255, 0.15);
      border-color: #409EFF;
    }

    .category-icon-large {
      font-size: 48px;
      margin-bottom: 15px;
    }

    .category-name {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 10px;
    }

    .category-desc {
      font-size: 14px;
      color: #909399;
      margin-bottom: 10px;
      min-height: 40px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .category-count {
      font-size: 12px;
      color: #409EFF;
      margin-top: 10px;
    }
  }
}
</style>

